<?php

 ?>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>个人中心</title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet" />
    <link href="css/card_roll.css" rel="stylesheet" />
</head>

  <body>
  <div id="content" class="main">
        <ul class="headerUL">
            <li class="activeName commonLi">
                优惠券
            </li>
            <li class="commonLi">
                礼品券
            </li>
        </ul>
        <div class="status">
            <p class="statusBtn activeName">全部</p>
            <p class="statusBtn">上架中</p>
            <p class="statusBtn">下架中</p>
        </div>
        <!-- 优惠券券 -->
        <ul class="couponUl">
            <li class="couponSec">
                <div class="editOrDel">
                    <div class="imgLog"><p class="editImg"><img src="images/1.png" alt=""></p><p>编辑</p></div>
                    <div class="imgLog">|</div>
                    <div class="imgLog"><p class="editImg"><img src="images/2.png" alt=""></p><p>编辑</p></div>
                </div>
                <p class="cardName">星巴克礼品领取券</p>
                <p class="carddESC">需到店领取-5折优惠</p>
                <p class="carddESC">2020-06-01 18:27 到期</p>
                <div class="btnUse">
                    <p class="statusText">上架</p>
                </div>
            </li>
            <li class="couponSec">
                <div class="editOrDel">
                    <div class="imgLog"><p class="editImg"><img src="images/1.png" alt=""></p><p>编辑</p></div>
                    <div class="imgLog">|</div>
                    <div class="imgLog"><p class="editImg"><img src="images/2.png" alt=""></p><p>编辑</p></div>
                </div>
                <p class="cardName">星巴克礼品领取券</p>
                <p class="carddESC">需到店领取-5折优惠</p>
                <p class="carddESC">2020-06-01 18:27 到期</p>
                <div class="btnUseDown">
                    <p class="downText">下架</p>
                </div>
            </li>
          
        </ul>
        <!-- 礼品券 -->
        <ul class="giftUL">
            <li class="couponSec">
                <div class="editOrDel">
                    <div class="imgLog"><p class="editImg"><img src="images/1.png" alt=""></p><p>编辑</p></div>
                    <div class="imgLog">|</div>
                    <div class="imgLog"><p class="editImg"><img src="images/2.png" alt=""></p><p>编辑</p></div>
                </div>
                <p class="cardName">星巴克礼品领取券cess</p>
                <p class="carddESC">需到店领取-5折优惠</p>
                <p class="carddESC">2020-06-01 18:27 到期</p>
                <div class="btnUse">
                    <p class="statusText">上架</p>
                </div>
            </li>
            <li class="couponSec">
                <div class="editOrDel">
                    <div class="imgLog"><p class="editImg"><img src="images/1.png" alt=""></p><p>编辑</p></div>
                    <div class="imgLog">|</div>
                    <div class="imgLog"><p class="editImg"><img src="images/2.png" alt=""></p><p>编辑</p></div>
                </div>
                <p class="cardName">星巴克礼品领取券</p>
                <p class="carddESC">需到店领取-5折优惠</p>
                <p class="carddESC">2020-06-01 18:27 到期</p>
                <div class="btnUseDown">
                    <p class="downText">下架</p>
                </div>
            </li>
        </ul>
       <p class="validCard">
        添加优惠券 
       </p>
    </div>
    <script src="./js/jquery-2.2.4.min.js"></script>
    <script>
    $(".headerUL li").on('click',function(){
		$(".headerUL li:eq(" + $(this).index() + ")").addClass("activeName")
		.siblings().removeClass('activeName')
	
		if($(this).index()===0){//优惠券券
			$(".couponUl").show();
			$(".giftUL").hide();
		}else{//礼品券
			$(".giftUL").show();
			$(".couponUl").hide();
		}
	})
	$(".validCard").on('click',function(){
        var addingElement='<li class="couponSec">\
                <div class="editOrDel">\
                    <div class="imgLog"><p class="editImg"><img src="images/1.png" alt=""></p><p>编辑</p></div>\
                    <div class="imgLog">|</div>\
                    <div class="imgLog"><p class="editImg"><img src="images/2.png" alt=""></p><p>编辑</p></div>\
                </div>\
                <p class="cardName">星巴克礼品领取券</p>\
                <p class="carddESC">需到店领取-5折优惠</p>\
                <p class="carddESC">2020-06-01 18:27 到期</p>\
                <div class="btnUseDown">\
                    <p class="downText">下架</p>\
                </div>\
            </li>'
		$(".couponUl").append(addingElement)
    })
    $(".status p").on('click',function(){
		$(".status p:eq(" + $(this).index() + ")").addClass("activeName")
		.siblings().removeClass('activeName')
	
		if($(this).index()===0){//全部
		
		}else if($(this).index()===1){//上架总
			
		}else{
          
        }
    })
    // 上架
    $(".statusText").on('click',function(){

        alert($(this).index()+"上架")
    })
    //下架
    $(".downText").on('click',function(){
        alert($(this).index()+"下架")
    })
    </script>
  </body>
</html>
